<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
    <script src="./lodash.js"></script>
</head>
<style>
  #relation{
    width: 1000px;
    height: 1000px;
  }
</style>
<body>
    <div id="relation"></div>
</body>
<script>
const mychart = echarts.init(document.getElementById('relation'));

const targetCoord = [0, 0]
const curveness = 0.2
const linesData = []
const categories = [{
    name: '本地企业',
    itemStyle: {
        normal: {
            color: 'pink',
        }
    },
    label: {
        normal: {
            fontSize: '14'
        }
    },
}, {
    name: '省内企业',
    itemStyle: {
        normal: {
            color: 'green',
        }
    },
    label: {
        normal: {
            fontSize: '14'
        }
    },
}, {
    name: '省外企业',
    itemStyle: {
        normal: {
            color: 'blue',
        }
    },
    label: {
        normal: {
            fontSize: '14'
        }
    },
}]

const item = {
    name: "数据中心",
    username: "",
    value: targetCoord,
    symbolSize: 100,
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#157eff'
            }, {
                offset: 1,
                color: '#35c2ff'
            }]),
        }
    },
    label: {
        normal: {
            fontSize: '14'
        }
    },
}

// const items = [{
//     name: "子平台1",
//     category: 0,
//     active: true,
//     speed: '50kb/s',
//     value: [0, 0]
// }, {
//     name: "子平台2",
//     category: 0,
//     active: true,
//     speed: '50kb/s',
//     value: [0, 100]
// }, {
//     name: "子平台3",
//     category: 1,
//     value: [0, 200]
// }, {
//     name: "子平台4",
//     category: 1,
//     value: [0, 300]
// }]

const random = () => {
    return Math.floor(Math.random() * 3)
}

const items = []
for (let index = 0; index < 10; index++) {
    items.push({
        name: `平台${index}`,
        username: ``,
        symbolSize: 60,
        category: random(),
        label: {
            normal: {
                fontSize: '14'
            }
        },
        active: Math.random() > 0.5,
        value: [0,0],
        // speed: Math.random() > 0.5 ? '100kb/s' : undefined,
    })
    
}
const len = items.length
items.forEach((el, index) => {
    const angle = 360 / len * index
    const x = 1000 * Math.cos(angle * Math.PI / 180)
    const y = 1000 * Math.sin(angle * Math.PI / 180)
    el.value = [x, y]
})

const data = items.concat([item])

items.forEach(function(el) {
    if (el.active) {
        // linesData.push([{
        //     coord: targetCoord,
        // }, {
        //     coord: el.value
        // }])
        linesData.push({
            coords: [targetCoord, el.value],
            lineStyle: {
                normal: {
                    curveness: curveness
                }
            }
        })
        linesData.push({
            coords: [targetCoord, el.value],
            lineStyle: {
                normal: {
                    curveness: -0.1
                }
            }
        })
        linesData.push({
            coords: [targetCoord, el.value],
            lineStyle: {
                normal: {
                    curveness: 0.1
                }
            }
        })

    }
})

const links = []
items.forEach((el) => {
    links.push({
        target: el.name,
        source: item.name,
        speed: el.speed,
        lineStyle: {
            normal: {
                color: 'pink',
                curveness: curveness,
            }
        },
    })
    links.push({
        target: el.name,
        source: item.name,
        speed: el.speed,
        lineStyle: {
            normal: {
                color: 'blue',
                curveness: -0.1,
            }
        },
    })
    links.push({
        target: el.name,
        source: item.name,
        speed: el.speed,
        lineStyle: {
            normal: {
                color: 'green',
                curveness: 0.1,
            }
        },
    })
})


option = {
    legend: [{
        formatter: function(name) {
            return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
        },
        tooltip: {
            show: true
        },
        textStyle: {
            color: '#999'
        },
        selectedMode: false,
        right: 0,
        data: categories.map(function(el) {
            return el.name
        })
    }],
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    series: [
        {
        type: 'graph',
        // layout: 'force',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 60,
        z: 3,
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 14
                },
                formatter: function(params) {
                    let txt = ''
                    if (params.data.speed !== undefined) {
                        txt = params.data.speed
                    }
                    return txt
                },
            }
        },
        label: {
            // normal: {
                show: true,
                // position: 'bottom',
                formatter: function (params) {
                  let c = params.data.username || "";
                  let b = params.data.name;
                  var str = "";
                  if (c === "") {
                    str = "{p|" + b + "}";
                  } else {
                    str = "{n|" + c + "}\n{p|" + b + "}";
                  }
                  return str;
                },
                rich: {
                  p: {
                    fontSize: 14,
                    color: "#142F54",
                    align: "center",
                  },
                  n: {
                    height: 25,
                    fontSize: 16,
                    color: "red",
                    align: "center",
                  },
                },
                color: '#5e5e5e'
            // },
        },
        itemStyle: {
            normal: {
                shadowColor: 'none'
            },
            emphasis: {

            }
        },
        lineStyle: {
            normal: {
                width: 2,
                shadowColor: 'none'
            },
        },
        edgeSymbol: ['none', 'arrow'],
        force: {
            repulsion: 1000,
            edgeLength: 300
        },
        edgeSymbolSize: 8,
        data: data,
        links: links,
        categories: categories
    }, 
    {
        name: 'A',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        z: 1,
        effect: {
            show: true,
            smooth: false,
            trailLength: 0,
            symbol: "arrow",
            color: 'rgba(55,155,255,0.5)',
            symbolSize: 12
        },
        // lineStyle: {
        //     normal: {
        //         curveness: curveness
        //     }
        // },
        data: linesData
    }
    ]
}
mychart.setOption(option);

mychart.on('mouseover', function(params) {
    // 鼠标移动到线上的时候，线的颜色变粗
    console.log(params);
    if (params.dataType === 'edge') {
        const {seriesIndex, dataIndex} = params
        const newoption = _.cloneDeep(option)
        newoption.series[seriesIndex].links[dataIndex].lineStyle.normal.width = 3
        newoption.series[seriesIndex].links[dataIndex].speed = '100kb/s'
        // 文字居中
        const index = newoption.series[seriesIndex].data.findIndex((el) => {
            return el.name === params.data.target
        })
        newoption.series[seriesIndex].data[index].username = '100%'
        // 线段虚线
        newoption.series[seriesIndex].links[dataIndex].lineStyle.normal.type = 'dashed'
        mychart.setOption(newoption)
    }
})

mychart.on('mouseout', function() {
  console.log('out')
  mychart.setOption(option)
})



</script>
</html>